<template>
  <div class="box">
    <!--  -->
    <el-container class="body">
      <!-- 侧边栏 -->
      <el-aside :width="asideWidth" class="aside">
        <div
          class="tab"
          @mouseenter="handleMouseEnter"
          @mouseleave="handleMouseLeave"
        >
          <div class="logo">
            <!-- <el-image
              src="../../../static/imgs/logo.png"
              fit="scale-down"
            ></el-image> -->
            <span>电影推荐系统</span>
          </div>
          <el-menu
            :collapse-transition="false"
            :collapse="isSearch"
            :default-active="currentIndex"
            class="el-menu-vertical-demo"
            background-color="#f8f8f8"
            text-color="#333"
            active-text-color="#6b52ae"
            @select="handleSelect"
            style="border-right: none"
          >
            <el-menu-item index="1">
              <i class="el-icon-house"></i>
              <span slot="title">首页</span>
            </el-menu-item>

            <el-menu-item index="5">
              <i class="el-icon-setting"></i>
              <span slot="title">设置</span>
            </el-menu-item>

            <el-menu-item index="0" style="display: none">
              <i class="el-icon-setting"></i>
              <span slot="title">搜索</span>
            </el-menu-item>
          </el-menu>
        </div>
        <div class="user-info" v-if="userInfo">
          <el-avatar
            :src="getAvartar(userInfo.userProfileUrl)"
            class="avartar"
          ></el-avatar>
          <div class="user-text" v-show="!isSearch">
            <div class="username">
              {{ userInfo.userNickname || `用户${userInfo.userId}` }}
            </div>
            <div class="user-email">
              {{ userInfo.userPhone || userInfo.userEmail }}
            </div>
          </div>
        </div>
        <div class="user-button" v-if="!userInfo && !isSearch">
          <el-button
            type="primary"
            icon="el-icon-user-solid"
            @click="goHomePage('login')"
            >登录</el-button
          >
          <el-button
            type="success"
            icon="el-icon-edit-outline"
            @click="goHomePage('register')"
            >注册</el-button
          >
        </div>
      </el-aside>
      <el-container>
        <!-- 主要内容区域 -->
        <el-main class="main">
          <!-- 在此处添加页面内容 -->
          <router-view class="content"></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { getAvartar, getAddress, getPosition } from "@/utils/tools";
export default {
  name: "SidebarLayout",
  components: {},
  data() {
    return {
      isSearch: false,
      asideWidth: "12rem",
      currentIndex: "1",
      userInfo: {},
      merchantList: [],
      type: "",
    };
  },

  //监听事件总线中改变userInfo的事件
  created() {
    this.type = this.$route.query.type;
    this.$bus.$on("updateUserInfo", this.updateUserInfo);
  },

  //销毁前移除事件
  beforeDestroy() {
    this.$bus.$off("updateUserInfo", this.updateUserInfo);
  },
  watch: {
    isSearch(newVal, oldVal) {
      this.$bus.$emit("changeReadonly", !newVal);
    },
  },
  //初始化导航栏，初始化用户数据
  mounted() {
    this.userInfo = JSON.parse(localStorage.getItem("user"));
    this.$store.dispatch("setUser", this.userInfo);
  },
  methods: {
    getAvartar,
    getAddress,
    getPosition,

    myNotify(type, title, message) {
      this.$notify({
        title: title,
        message: message,
        offset: 100,
        type: type,
        duration: 3000,
      });
    },

    //用户信息改变时的处理
    updateUserInfo(newUserInfo) {
      this.userInfo = newUserInfo;
      this.$store.dispatch("setUser", this.userInfo); // 调用 Vuex action
    },
    //去登录或者注册页
    goHomePage(type) {
      this.$router.push({ path: "/home", query: { status: type } });
    },
    //鼠标进入导航栏区域，如果处在搜索页下，改变导航栏宽度
    handleMouseEnter() {
      if (this.currentIndex == "0") {
        this.isSearch = false;
        this.asideWidth = "12rem";
      }
    },
    //鼠标离开导航栏区域，如果处在搜索页下，改变导航栏宽度
    handleMouseLeave() {
      if (this.currentIndex == "0") {
        this.isSearch = true;
        this.asideWidth = "5rem";
      }
    },

    //搜索框获取焦点
    serachFocus() {
      this.isSearch = true;

      this.asideWidth = "5rem";
      this.handleSelect("0", "");
    },
    //导航切换，如果就是当前页，不做改变
    handleSelect(key, keyPath) {
      if (key == this.currentIndex) {
        return;
      }
      this.currentIndex = key;
      switch (key) {
        case "0":
          this.$router.replace("/searchPage");
          break;
        case "1":
          this.isSearch = false;
          this.$router.replace("/customerSquare");
          break;

        case "5":
          this.isSearch = false;
          this.$router.replace("/customerInformation");
          break;
      }
    },
  },
};
</script>

<style lang="less" scoped>
// 定义变量
@active-color: #6b52ae;
@hover-color: #e0e0e0;
@font-color: white;
@icon-font-size: 1.25rem;
@menu-item-font-size: 1.25rem;
@border-radius: 0.7rem;
@right-margin: 0.625rem;
@header-height: 4rem; //logo区域和header区域的高度
@main-margin: 1rem; //主体区域统一的左右边距
@transition-duration: 0.8s; // 过渡动画时间
@menu-border: 0.8rem; //导航栏圆角

* {
  margin: 0;
  padding: 0;
}

.box {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;

  .drawer {
    width: 18.75rem;
    height: 100vh;
  }

  .body {
    flex: 1;
  }

  /deep/.el-menu-item [class^="el-icon-"] {
    width: 1.5rem;
    margin-right: 0.3rem;
    font-size: @icon-font-size !important;
  }

  .aside {
    background-color: #f8f8f8;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    transition: width @transition-duration;
    border-radius: 0 @menu-border @menu-border 0;

    .tab {
      width: 100%;
      height: 90%;
      transition: width @transition-duration;
      display: flex;
      flex-direction: column;
      align-items: center;

      .logo {
        display: flex;
        justify-content: center;
        align-items: center;
        height: @header-height;

        .el-image {
          width: 10rem;
          height: 10rem;
          transform: scale(0.8);
        }
        span {
          font-size: 1.6rem;
          font-family: "Comic Sans MS", "Segoe Script", cursive; /* 使用 Windows 自带的手写字体 */
          font-weight: 700;
        }
      }

      .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 100%;
        border-right: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: width 0.2s;
      }

      .el-menu-vertical-demo.el-menu--collapse {
        width: 90%;
        border-right: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #f8f8f8;
        transition: width 0.1s;
      }

      .el-menu-item {
        width: 94%;
        height: 3.2rem;
        font-size: @menu-item-font-size;
        transition: width @transition-duration;
        display: flex;
        align-items: center;

        /deep/.el-icon {
          display: block !important;
          width: 2rem !important;
          height: 2rem !important;
          font-size: @icon-font-size !important;
        }

        &.is-active {
          padding-left: 1.25rem;
          background-color: @active-color !important;
          color: @font-color !important;
          border-radius: @border-radius !important;

          .el-icon {
            color: @font-color !important;
          }
        }

        &:hover {
          background-color: @hover-color !important;
          border-radius: @border-radius !important;
          margin-right: @right-margin !important;
        }
      }
    }

    .user-button {
      display: flex;
      justify-content: space-between;
      border-radius: 0.625rem;
      margin-bottom: 1.2rem;
      width: 76%;
      transition: all 0.3s;

      .el-button {
        text-align: center;
        width: 50%;
        height: 1.8rem;
        font-size: 1rem;
        font-weight: 400;
        letter-spacing: 0.3rem;
        transition: all 0.3s;
      }
    }

    .user-info {
      width: 90%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border-radius: 0.625rem;
      margin-bottom: 1.25rem;
      transition: all 0.3s;

      .avartar {
        flex-shrink: 0;
        width: 2.5rem;
        height: 2.5rem;
      }

      .user-text {
        transition: width 0.3s;
        width: 80%;
        margin-left: 0.3rem;
        min-width: 0;
        max-width: calc(100% - 3rem);
        display: flex;
        flex-direction: column;
        overflow: hidden;

        .username {
          font-size: 0.9rem;
          font-weight: bold;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .user-email {
          color: #575454;
          font-size: 0.8rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }

  .main {
    margin: 0 @main-margin;

    .header {
      height: @header-height;
      transition: width @transition-duration;
    }

    .content {
      height: 92vh;
      width: 85vw;
    }
  }
}
</style>